<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"> 
	<title>Bootstrap 实例 - 标签页（Tab）插件</title>
	<link href="lib/lib/css/bootstrap.min.css" rel="stylesheet">
	<script src="lib/jquery/jquery-1.11.0.min.js"></script>
	<script src="lib/lib/js/bootstrap.min.js"></script>
</head>
<body>


	<ul class="nav nav-tabs" id="mytab">
		<li class="active">
			<a href="#home" data-toggle="tab">菜鸟教程</a>
		</li>
		<li>
			<a href="#ios" data-toggle="tab">ios</a>
		</li>
		<li>
			<a href="#java" data-toggle="tab">java</a>
		</li>
		
		<li class="dropdown">
			<a href="#" id="dropValue" class="dropdown-toggle" data-toggle="dropdown">
				javaScript <span class="caret"></span>
			</a>

			<ul class="dropdown-menu" role="menu" aria-labelledby="dropValue">
				<li><a href="#tab-Drop1"  data-toggle="tab">dropdown 1</a></li>
				<li><a href="#tab-Drop2"  data-toggle="tab">dropdown 2</a></li>
				
			</ul>

		</li>


	</ul>

	<div class="tab-content" id="myTabContent">
		<div class="tab-pane fade in active" id="home">
			<p>home home</p>
		</div>

		<div class="tab-pane fade " id="ios">
			<p>ios ios ios</p>
		</div>

		<div class="tab-pane fade" id="java">
			<p>java java</p>
		</div>

		<div class="tab-pane fade" id="tab-Drop1">
			<p>tab dropdown 1</p>
		</div>

		<div class="tab-pane fade" id="tab-Drop2">
			<p>tab dropdown 2</p>
		</div>

	</div>








</body>
</html>